<template>
	<view class="">
		<view class="header">
			<view class="select-btn">
				北京
			</view>
			<navigator class="select-city">
				更换城市
			</navigator>
		</view>
		<view class="shop">
			<view class="shop-item" v-for="(item,index) in 10">
				<view class="shop-item-left">
					<image src="/static/uview/example/component_select.png" style="width: 120rpx;height: 120rpx;"
						mode="widthFix"></image>
					<view class="m-l-10 shop-item-info">
						<view class="">
							卡力特汽修
						</view>
						<view class="u-light-color">
							5W 40
						</view>
						<view class="u-light-color">
							已服务 <span class="price">199</span> 单
						</view>
					</view>
				</view>
				<view class="shop-item-right">
					2.5km
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.header {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
		margin: 15rpx 0;

		.select-city {
			color: rgba(100, 100, 237, 1);
			font-size: 30rpx;
		}
	}
	
	.price {
		color: $priceColor;
		font-size: 28rpx;
		font-weight: 700;
	}

	.shop {
		background-color: #fff;
		padding: 0 30rpx;

		&-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&-left {
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
			}

			&-right {
				font-size: 24rpx;
			}
			
			&-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 120rpx;
			}
		}
	}
</style>
